<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
    <title>Bootstrap 实例 - 缩略图</title>
	<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
	<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  <style>
		/*下面可以自己修改*/
    body {
      padding: 20px;
    }
	</style>
  
</head>
<body>
<!--
缩略图在网站中最常用的地方就是产品列表页面，一行显示几张图片，有的在图片底下（左侧或右侧）带有标题、描述等信息。
Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看。

源码文件：

  ☑  LESS版本：对应文件thumbnails.less
  ☑  Sass版本：对应文件_thumbnails.scss
  ☑ 编译后版本：bootstrap.css文件第4402行～第4426行

使用方法：
通过“thumbnail”样式配合bootstrap的网格系统来实现。
前面也说过了，缩略图的实现是配合网格系统一起使用，假设我们一个产品列表：

先来看结构：

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
            </a>
        </div>
    …
    </div>
</div>
上面的结构表示的是在宽屏幕（可视区域大于768px）的时候，一行显示四个缩略图(单击全屏查看效果)：
在窄屏（可视区域小于768px）的时候，一行只显示两个缩略图
-->
<div class="row">
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="http://placekitten.com/g/200/300"
                 alt="通用的占位符缩略图">
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="http://placekitten.com/g/200/300"
                 alt="通用的占位符缩略图">
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="http://placekitten.com/g/200/300"
                 alt="通用的占位符缩略图">
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="http://placekitten.com/g/200/300"
                 alt="通用的占位符缩略图">
        </a>
    </div>
</div>

</body>
</html>